import 'package:bruno/bruno.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class GiftExhibitionHallPage extends StatefulWidget {
  const GiftExhibitionHallPage({super.key});

  @override
  State<GiftExhibitionHallPage> createState() => _GiftExhibitionHallPageState();
}

class _GiftExhibitionHallPageState extends State<GiftExhibitionHallPage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: const Color(0xFF271D51),
      child: Stack(
        children: [
          Image.asset('assets/app/images/user_center/gift_top_bg.png'),
          Scaffold(
            backgroundColor: Colors.transparent,
            appBar: BrnAppBar(
              title: '礼物展览馆',
              backgroundColor: Colors.transparent,
              themeData: BrnAppBarConfig(
                  titleStyle: BrnTextStyle(color: Colors.white), actionsStyle: BrnTextStyle(color: Colors.white)),
            ),
            body: Container(
              child: Column(
                children: [
                  const SizedBox(height: 50),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      Column(
                        children: [
                          Text('2000',
                              style: TextStyle(color: Colors.white, fontSize: 24.sp, fontWeight: FontWeight.w600)),
                          Text('已点亮',
                              style: TextStyle(color: Colors.white, fontSize: 12.sp, fontWeight: FontWeight.w600)),
                        ],
                      ),
                      const SizedBox(width: 50),
                      Column(
                        children: [
                          Text('2000',
                              style: TextStyle(color: Colors.white, fontSize: 24.sp, fontWeight: FontWeight.w600)),
                          Text('未点亮',
                              style: TextStyle(color: Colors.white, fontSize: 12.sp, fontWeight: FontWeight.w600)),
                        ],
                      )
                    ],
                  ),
                  Expanded(
                    child: Container(
                      margin: const EdgeInsets.only(top: 70),
                      // padding: const EdgeInsets.only(left: 12, right: 12, top: 25),
                      decoration: BoxDecoration(
                          color: const Color(0xFF120D25),
                          borderRadius:
                              BorderRadius.only(topLeft: Radius.circular(12.r), topRight: Radius.circular(12.r))),
                      child: ScrollConfiguration(
                          behavior: const ScrollBehavior(),
                          child: GridView.builder(
                            padding: const EdgeInsets.only(left: 12, right: 12, top: 25, bottom: 30),
                            // shrinkWrap: true,
                            // physics: const NeverScrollableScrollPhysics(),
                            itemCount: 100,
                            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                              crossAxisCount: 4,
                              mainAxisSpacing: 13,
                              crossAxisSpacing: 12,
                              childAspectRatio: 78 / 104,
                            ),
                            itemBuilder: (context, position) {
                              return Container(
                                alignment: Alignment.center,
                                padding: const EdgeInsets.symmetric(vertical: 10),
                                decoration: BoxDecoration(
                                    // color: const Color(0xFFF2F5FF),
                                    borderRadius: BorderRadius.circular(8),
                                    // border: Border.all(color: const Color(0xFF25D4D0), width: 1),
                                    gradient: LinearGradient(
                                      colors: [
                                        const Color(0xFFBFD1FF).withOpacity(0.2),
                                        const Color(0xFFBFD1FF).withOpacity(0.08)
                                      ],
                                      begin: Alignment.topCenter,
                                      end: Alignment.bottomCenter,
                                    )),
                                child: Column(
                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                  children: [
                                    Image.asset('assets/images/app_logo.png', width: 40, height: 40),
                                    Row(
                                      mainAxisAlignment: MainAxisAlignment.center,
                                      children: [
                                        Image.asset('assets/app/images/message/coin_icon.png', width: 12),
                                        const Text('999', style: TextStyle(fontSize: 12, color: Color(0xFF25D4D0))),
                                      ],
                                    ),
                                    const Text('玫瑰', style: TextStyle(fontSize: 12, color: Colors.white)),
                                  ],
                                ),
                              );
                            },
                          )),
                    ),
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
